<script setup lang="ts">
import { Message, OrderItem, Page, User } from '@/model';
import { pageUser } from '@/api';

// 分页请求参数
const pageParam = ref<Page<User>>({});

const props = defineProps<{
  // 是否打开弹出层
  visible: boolean;
}>();

const emits = defineEmits(['closeDialog']);

// 表数据
const tableData = ref<Page<Message>>({
  records: [] as Message[],
  current: 0,
  pages: 0,
  size: 0,
  total: 0,
});

/**
 * 动态计算表格高度
 */
const tableHeight = computed(() => {
  return window.innerHeight - 710;
});

/**
 * 分页请求
 * @param pageObj 分页请求信息
 */
const pageReq = (pageObj: Page<User>) => {
  pageUser(pageObj).then((res) => {
    if (res.records && res.records.length) {
      tableData.value.records = res.records;
      tableData.value.current = Number(res.current);
      tableData.value.pages = Number(res.pages);
      tableData.value.size = Number(res.size);
      tableData.value.total = Number(res.total);
    } else {
      tableData.value.records = [];
    }
  });
};

// 监听当前页变化，请求数据
watch(
  () => tableData.value.current,
  () => {
    pageParam.value.current = tableData.value.current;
    pageReq(pageParam.value);
  },
  { deep: true },
);

/**
 * 关闭弹窗
 */
const onClose = () => {
  emits('closeDialog');
};

/**
 * 打开弹窗
 */
const onOpen = () => {
  pageParam.value = {
    current: 1,
    size: 10,
    orderItems: new Array<OrderItem>({
      column: 'createAt',
      asc: false,
    }),
  };
  pageReq(pageParam.value);
};
</script>

<template>
  <el-dialog
    :model-value="props.visible"
    :show-close="false"
    width="60%"
    @close="onClose"
    @open="onOpen"
  >
    <template #header>
      <div class="form-header">
        <span class="title">消息列表</span>
        <div>
          <el-tooltip content="关闭" placement="top" effect="light" :show-after="500">
            <el-button class="btn-cancel" circle @click.stop="onClose()">
              <el-icon>
                <i-ep-close />
              </el-icon>
            </el-button>
          </el-tooltip>
        </div>
      </div>
    </template>
    <el-table :data="tableData.records" :height="tableHeight" size="large">
      <el-table-column type="index" width="60" label="序号" />
      <el-table-column prop="name" label="消息" />
    </el-table>
    <div class="page-container">
      <el-pagination
        :background="true"
        v-model:current-page="tableData.current"
        v-model:page-size="tableData.size"
        :total="tableData.total"
        :page-count="tableData.pages"
        :pager-count="5"
        layout="prev, pager, next"
        class="table-pagination"
      >
      </el-pagination>
    </div>
  </el-dialog>
</template>

<style scoped lang="scss">
.el-table {
  height: 100%;
  width: calc(100% - 40px);
  overflow: auto;
  margin: 20px 20px 0 20px;
}

.page-container {
  position: relative;
  height: 30px;

  .table-pagination {
    position: absolute;
    right: 0;
    margin: 10px 20px 10px 0;

    ::v-deep(button) {
      width: 40px;
      height: 40px;
      border-radius: 20px;

      :hover {
        color: #0e9ea3;
      }

      .el-icon {
        height: 20px;
        width: 20px;
        font-size: 20px;
      }
    }

    ::v-deep(ul) {
      li {
        border-radius: 20px;
        width: 40px;
        height: 40px;
      }

      .is-active {
        background-color: #0e9ea3;
      }

      .number:not(.is-active):hover {
        color: #0e9ea3;
      }
    }
  }
}
</style>
